<template>
  <div>
    <div
      class="fill-base mb-lg"
      :style="[{ 'mt-lg': !isMyDynamic && index === 0 }]"
      v-for="(item, index) in isMyDynamic ? o.data.row.number : 5"
      :key="index"
    >
      <div class="info-box">
        <div class="flex-y-center mt-lg">
          <img class="avatar md circle" :src="image" />
          <div class="flex-1 ml-md ellipsis mr-md">
            <div class="f-paragraph ellipsis">
              {{ index === 1 ? '某某科技有限公司' : '张三' }}
            </div>
            <div class="c-caption f-caption">06-05 12:00</div>
          </div>
          <div class="info-btn" v-if="index > 0 && index < 4">
            <div
              class="iconfont mr-sm"
              :class="[
                { icondianhua2: index === 1 },
                { 'icon-guanwang': index === 2 },
                { iconxiaochengxu: index === 3 }
              ]"
            ></div>
            <div>
              {{ index === 1 ? '打电话' : index === 2 ? '链接' : '小程序' }}
            </div>
          </div>
        </div>
        <div v-if="index !== 4">
          <div class="mt-md">
            {{
              index === 0
                ? '普通动态_图文或富文本'
                : index === 1
                ? '拨打电话'
                : index === 2
                ? '跳转网页链接'
                : '跳转小程序'
            }}
          </div>
        </div>
        <!-- 获客文章 -->
        <div class="cover-box mt-md" v-if="index === 4">
          <img class="cover-img" :src="image" mode="aspectFill" />
          <div class="cover-title ellipsis-3">获客文章_文章标题</div>
        </div>
        <div v-else>
          <div class="image-box mt-sm" v-if="index === 0">
            <img
              class="image-item"
              v-for="(citem, cindex) in 9"
              :key="cindex"
              :src="image"
              mode="aspectFill"
            />
          </div>
          <div class="cover-box mt-md" v-else>
            <img class="cover-img" :src="image" mode="aspectFill" />
          </div>
        </div>
      </div>

      <div class="normal-list h-80">
        <div class="flex-1 flex-y-center">
          <img
            v-for="(citem, cindex) in index == 0 ? 6 : index == 1 ? 3 : 5"
            :key="cindex"
            class="thumb-avatar"
            :src="image"
          />
          <div class="c-caption f-caption">28人点赞</div>
        </div>
        <div class="clear-btn flex-y-center c-title mr-md">
          <div class="iconfont icondafenxiang"></div>
          <div class="ml-sm f-caption">分享</div>
        </div>
        <div
          class="flex-y-center"
          :style="{ color: index === 0 ? primaryColor : '#333' }"
        >
          <div
            class="iconfont"
            :class="[{ 'iconlike-b': index === 0 }, { iconlike: index !== 0 }]"
          ></div>
          <div class="ml-sm f-caption">
            {{ index === 0 ? '已点赞' : '点赞' }}
          </div>
        </div>
      </div>

      <div class="pl-lg pr-lg pb-lg fill-base" v-if="index == 0">
        <div class="pd-md fill-body">
          <div
            v-for="(citem, cindex) in 2"
            :key="cindex"
            class="flex-y-center"
            :class="[{ 'mt-sm': cindex != 0 }]"
            style="word-break: break-all; vertical-align: middle"
          >
            <div class="text-bold">用户A{{ cindex + 1 }}：</div>
            <div>这里是用户A{{ cindex + 1 }}发布的评论</div>
          </div>
          <div :style="{ color: primaryColor }" class="mt-sm">查看更多</div>
        </div>
      </div>
      <div
        class="pl-lg pr-lg pb-lg fill-base flex-center"
        v-if="o.data.isShowComment"
      >
        <img class="comment-avatar" :src="image" />
        <div class="ml-md flex-1">
          <div class="comment-input f-paragraph">简单说两句...</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dynamicList',
  props: {
    o: Object,
    isMyDynamic: false
  },
  data () {
    return {
      primaryColor: '#19c865',
      image: 'https://lbqny.migugu.com/admin/diy/default.png'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.info-box {
  background: #fff;
  padding: 0 16px;
  overflow: hidden;
}

.image-box {
  display: flex;
  flex-wrap: wrap;
}

.image-item {
  width: 109px;
  height: 109px;
  background: #eaeaea;
  margin-right: 6px;
  margin-top: 6px;
}

.image-item:nth-child(3n) {
  margin-right: 0;
}

.image-item-single {
  max-width: 343px;
  max-height: 343px;
  background: red;
  margin-top: 13px;
}

.cover-title {
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  padding: 9px 16px;
  bottom: 0;
  color: #fff;
  width: 100%;
}

.info-btn {
  height: 27px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: #f4f6f8;
  border-radius: 5px;
  font-size: 12px;
  color: #666;
}

.cover-box {
  width: 343px;
  height: 200px;
  position: relative;
}

.cover-img {
  width: 100%;
  height: 100%;
  background: #eeeeee;
  border-radius: 7px;
}

.cover-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.comment-avatar {
  width: 30px;
  height: 30px;
  background: #eee;
  border-radius: 50%;
}
.comment-input {
  line-height: 30px;
  border-bottom: 1px solid #eee;
}
.comment-box {
  width: 100%;
  background: #f4f6f8;
  padding: 16px;
  position: fixed;
  bottom: 0;
  z-index: 99999;
  border-top: 1px solid #eee;
}
.comment-textarea {
  box-sizing: border-box;
  padding: 5px;
  background: #fff;
  width: 343px;
  height: 75px;
  border-radius: 3px;
  border: 1px solid #eee;
}
.thumb-avatar {
  width: 18px;
  height: 18px;
  background: red;
  border-radius: 50%;
  margin-right: 5px;
}
.add-box {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  position: fixed;
  right: 16px;
  bottom: 50px;
  border-radius: 50%;
}
.normal-list {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 50px;
  background: #fff;
  line-height: 1;
}
</style>
